<template>
  <div class="msg-box">
     <ul ref="msgContent" id="msgContent" @touchstart = 'start' class="[]">
       <li>
         <span>阮光远1</span><span >：</span><span>爱创客江安河就开始达到</span>
       </li>
       <li>
         <span>阮光远2</span><span >：</span><span>爱创客江安河就开始达到爱创客江安河就开始达到爱创客江安河就开始达到爱创客江安河就开始达到</span>
       </li>
       <li>
         <span>阮光远3</span><span >：</span><span>爱创客江安河就开始达到eeeeeeee333</span>
       </li>
       <li>
         <span>阮光远4</span><span >：</span><span>爱创客江安河就开始达到</span>
       </li>
       <li>
         <span>阮光远5</span><span >：</span><span>爱创客江安河就开始达到</span>
       </li>

       <li>
         <span>阮光远5</span><span >：</span><span>爱创客江安河就开始达到</span>
       </li><li>
         <span>阮光远5</span><span >：</span><span>爱创客江安河就开始达到</span>
       </li><li>
         <span>阮光远5</span><span >：</span><span>爱创客江安河就开始达到</span>
       </li><li>
         <span>阮光远5</span><span >：</span><span>爱创客江安河就开始达到</span>
       </li><li>
         <span>阮光远5</span><span >：</span><span>爱创客江安河就开始达到</span>
       </li><li>
         <span>阮光远5</span><span >：</span><span>爱创客江安河就开始达到</span>
       </li><li>
         <span>阮光远5</span><span >：</span><span>爱创客江安河就开始达到</span>
       </li><li>
         <span>阮光远5</span><span >：</span><span>爱创客江安河就开始达到</span>
       </li><li>
         <span>阮光远5</span><span >：</span><span>爱创客江安河就开始达到</span>
       </li>
     </ul>
  </div>
</template>

<script>
  export default {
    props: {
      imTextMsg:Object,//im普通消息
    },
    components: {
    },
    data(){
      return{
      }
    },
    watch:{
      imTextMsg(cur){
        this.msgDom(cur)
      },
    },
     created() {

     },
     mounted(){
       window.requestAnimationFrame(function(){
         console.log(111)
       })
       //this.$refs.msgContent.addEventListener('scroll',this.renderDom);
     },
     updated(){
             // 聊天定位到底部
        //this.$refs.msgContent.scrollTop = this.$refs.msgContent.scrollHeight;
       },
     methods:{
       start(){
      },
       renderDom(){
          //this.$refs.msgContent.scrollTop = this.$refs.msgContent.scrollHeight;
          //var time = Date.now();
       },
       msgDom(obj){//
         let f = document.createDocumentFragment();
         let li = document.createElement("li");
         li.className = "message-box-li";
         let span1 = document.createElement("span");
         span1.className = 'nick-name';
         span1.innerText = obj.nickName;
         let spanColon = document.createElement("span");
         spanColon.className = "comma";
         spanColon.innerText = " ：";
         li.appendChild(span1);
         li.appendChild(spanColon);
         let span2 = document.createElement("span");
         span2.className = 'message-text';
         span2.innerText = fun.searchIphoneNum(obj.message);
         li.appendChild(span2);
         this.$nextTick(() => {
           this.$refs.msgContent.insertBefore(
             li,
             this.$refs.msgContent.childNodes[0]
           );
         })
         //this.$refs.msgContent.scrollTop = this.$refs.msgContent.scrollHeight;
         //this.$refs.msgContent.scrollTop = ''
       }
     }
  }
</script>

<style scoped="scoped" lang="less">
  .msg-box{
     width: 520px;
     height: 430px;
     background: salmon;
     position: absolute;
     bottom: 720px;
     left: 30px;
     z-index: 12;
     overflow: hidden;
     font-size: 26px;
     font-weight: 500;
     color: #fff;
     ul{
       width: 520px;
       height: 430px;
       background: darkcyan;
       overflow-y: scroll;
       display: flex;
       flex-direction: column-reverse;
       // justify-content: flex-start;
       li{
           margin: 5px 0;
           width: fit-content;
           background: rgba(0, 0, 0, 0.29);
           padding: 0 10px;
       }
     }
  }
</style>
